<template>
	<view class="page">
		<view class="" style="height: 198rpx;">
			
		</view>
		<!-- <view > -->
			<scroll-view scroll-y class="content"  >
				<view class="box">
					<view class="title">
						<image src="../../static/image/travel/selected.png" mode=""></image>
						<text>{{title}}</text>
					</view>
					<view class="item" v-for="(item,index) in showData" :key="index">
						<view class="first">
							<image @click="handleItem(false, 1, index)" v-if="item.checked" src="../../static/image/travel/selected.png" mode=""></image>
							<image @click="handleItem(true, 1, index)" v-else src="../../static/image/travel/noselect.png" mode=""></image>
							<text>{{item.title}}</text>
						</view>
						<view class="secord" v-for="(itm,ind) in item.list" :key="ind">
							<image @click="handleItem(false, 2, index, ind)" v-if="itm.checked" src="../../static/image/travel/selected.png" mode=""></image>
							<image @click="handleItem(true, 2, index, ind)" v-else src="../../static/image/travel/noselect.png" mode=""></image>
							<text>{{itm.title}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		<!-- </view> -->
		<view class="" style="height: 586rpx;">
			
		</view>
		<view class="sharebox">
			<view class="title">
				<text >分享至</text>
				<image @click="shareFn" src="../../static/image/travel/close.png" mode=""></image>
			</view>
			<view class="list">
				<view @click="handleshare(item,index)" class="item" v-for="(item,index) in list" :key="index">
					<image :src="item.img" mode=""></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="line">
				
			</view>
			<view class="list">
				<view @click="handleshare(item,index)" class="item" v-for="(item,index) in list2" :key="index">
					<image :src="item.img" mode=""></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sharepyq from '../../static/image/travel/sharepyq.png'
	import shareqq from '../../static/image/travel/shareqq.png'
	import sharewb from '../../static/image/travel/sharewb.png'
	import sharewx from '../../static/image/travel/sharewx.png'
	import copy from '../../static/image/travel/copy.png'
	export default {
		data() {
			return {
				title: '深圳-福州-3日',
				showData:
				[					{						title: 'D1：深圳-福州，三巷七坊',
						checked: false,						list: [ 
							{ title: '09:00-11:00 福建博物馆', checked: false },
							{ title: '11:00-15:00 三巷七坊', checked: false }, 
							{ title: '16:00-20:00 闽江夜游', checked: false }, 
						]					},
					{
						title: 'D2：福州 ，鼓山',
						checked: false,
						list: [
							{ title: '09:00-11:00 鼓山', checked: false },
							{ title: '11:00-15:00 上下杭', checked: false }, 
							{ title: '16:00-20:00 福道', checked: false }, 
						]
					},
					{
						title: 'D3：福州-平潭，平潭岛',
						list: [
							{ title: '08:00-09:00 福州-平潭', checked: false },
							{ title: '08:00-09:00 福州-平潭', checked: false }, 
							{ title: '08:00-09:00 福州-平潭', checked: false }, 
						]
					},				]
				,
				list: [
					{
						title: '微信好友',
						img: sharewx
					},
					{
						title: '朋友圈',
						img: sharepyq
					},
					{
						title: '微博',
						img: sharewb
					},
					{
						title: 'QQ好友',
						img: shareqq
					}
				],
				list2: [
					{
						title: '复制链接',
						img: copy
					}
				]
			}
		},
		methods: {
			shareFn() {
				uni.navigateBack()
			},
			handleItem(flag, type, index, ind) {
				console.log(flag, type, index, ind)
				if(type == 1) {
					this.showData[index].checked = flag
				} else {
					this.showData[index].list[ind].checked = flag
				}
				
			},
			handleshare(obj, index) {
				console.log('handleshare', obj.title)
				let item = obj.title
				if(item == '微信好友') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 1,
						summary: "深圳-福州-3日，D1:深圳-福州，三巷七坊（09:00-11:00 福建博物馆）",
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if(item == '朋友圈') {
					uni.share({
					    provider: "weixin",
					    scene: "WXSenceTimeline",
					    type: 1,
					    summary: "深圳-福州-3日，D1:深圳-福州，三巷七坊（09:00-11:00 福建博物馆）",
					    success: function (res) {
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
					});
				} else if(item == '微博') {
					uni.share({
						provider: 'sinaweibo',
						type: 1,
						title: "分享标题",
						summary: "深圳-福州-3日，D1:深圳-福州，三巷七坊（09:00-11:00 福建博物馆）",
						// imageUrl: "图片地址，type为0、2、5时必选",
						// href: "跳转链接，type为0时必选",
						success: res => {
						console.log('success', res);
						},
						fail: res => {
						console.error('fail', res);
						}
					})
				} else if(item == 'QQ好友') {
					uni.share({
						provider: "qq",
						scene: "WXSceneSession",
						title:'标题',
						type: 1,
						href:url,
						summary:'深圳-福州-3日，D1:深圳-福州，三巷七坊（09:00-11:00 福建博物馆）'+ '这是url',
						success: function (res) {
						   // that.$refs.popup.close()
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});	
				} else if(item == '复制链接') {
					var pages = getCurrentPages() // 获取栈实例
					  let domain = 'http://xxxxxx.com/'//项目的域名
					  let currentRoute  = pages[pages.length-1].route; // 获取当前页面路由
					  let currentPage = domain + pages[pages.length-1]['$page']['fullPath'] //当前页面路径(带参数)
					  uni.setClipboardData({
						data: currentPage,
						success: () => {
						  setTimeout(()=>{
							uni.showToast({
							  title: '已复制到粘贴板',
							  icon: 'none'
							});
						  })
						}
					  });
					  uni.hideToast();
				}
			},
		}
	}
</script>

<style lang="less">
.page {
	// width: 750rpx;
	width: 100vw;
	
	// height: 100vh;
	max-height: 100%;
	background: rgba(0,0,0, 0.5);
	// opacity: 0.5;
	.content {
		flex: 1;
		margin: 0 40rpx 40rpx 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		flex: 1;
		width: calc(100vw - 80rpx);
		height: calc(100vh - 198rpx - 586rpx - 40rpx);
			// overflow: scroll;
		.box {
			padding: 40rpx 30rpx 0 40rpx;
			.title {
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				text {
					font-weight: bold;
					font-size: 30rpx;
					color: #1A1A1A;
					line-height: 40rpx;
				}
			}
			.item {
				margin-bottom: 20rpx;
				padding: 24rpx 20rpx 4rpx 20rpx;
				background: #F5F7F9;
				border-radius: 16rpx;
				.first {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					text {
						font-size: 28rpx;
						color: #1A1A1A;
						line-height: 40rpx;
					}
				}
				.secord {
					padding-left: 64rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					text {
						font-size: 28rpx;
						color: #595959;
						line-height: 40rpx;
					}
				}
			}
		}
	}
	.sharebox {
		// width: 750rpx;
		position: fixed;
		bottom: 0;
		width: 92vw;
		height: 586rpx;
		background: #FFFFFF;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		padding: 0 30rpx;
		.title {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 118rpx;
			text {
				color: #000;
				font-weight: bold;
				font-size: 35rpx;
				line-height: 48rpx;
			}
			image {
				width: 45rpx;
				height: 45rpx;
				position: absolute;
				top: 32rpx;
				right: 36rpx;
			}
		}
		.list {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #595959;
					line-height: 34rpx;
				}
				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 14rpx;
				}
			}
		}
		.line {
			// width: 750rpx;
			height: 2rpx;
			background: #F3F5F6;
			margin: 30rpx 0;
		}
		
	}
}
</style>
